<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="墨瞳 - 墨瞳" />
<meta name="Description" content="墨瞳 - 墨瞳" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>墨瞳 - 墨瞳</title>
<style type="text/css">
	body{background: url(img/bg.jpg) repeat; width: 100%; height: 100%; padding: 0; margin: 0;}
	.index_flash{width: 1200px; height: 500px; margin: 0 auto; -moz-box-shadow: 0 0 5px 5px #f8f8f8; box-shadow: 0 0 5px 5px #f8f8f8; position: absolute; left: 50%; margin: -250px 0 0 -600px; top: 50%;}
	.music{position: absolute; left: 0; bottom: -30px; width: 100px; z-index: 1000000;}
	.speaker{cursor: pointer;}
</style>
</head>
<body>
	<div class="index_flash">
		<object height="500" width="1200" type="application/x-shockwave-flash" id="player" name="player" data="img/motong.swf">
		    <param name="allowfullscreen" value="true">
		    <param name="allowscriptaccess" value="always">
		    <param name="wmode" value="opaque">
		    <param name="flashvars" value="img/motong.swf">
		</object>
		<div class="music">
		    <div class="speaker" style=""><img src="img/music_on.png" /></div>
		    
		    <audio id="audio" src="img/music.mp3 " loop="" preload="auto" autoplay="true"></audio>
		</div>
	</div>
	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		var audio = document.getElementById('audio');
		$(".speaker").on('click',function(){
		    var src = $('.speaker img').attr('src');
		    if( src=='img/music_off.png' ){
		        audio.play();
		        $('.speaker img').attr('src','img/music_on.png');
		    }else{
		        audio.pause();
		        $('.speaker img').attr('src','img/music_off.png');
		    }
		})
	</script>
</body>
</html>